<template>
  <div>
    <div class="houtai">
      <div class="title">
        <img src="../assets/images/home_log.png"
             class="log_img"
             alt="">
        <h2>电商 - 后台管理系统</h2>
        <el-button type="danger"
                   round
                   @click="loginOut"
                   size="small"
                   class="logOut"
                   icon="el-icon-delete">退出</el-button>
        <!-- <el-button type="primary" >搜索</el-button> -->
      </div>
      <div class="menu"
           :width="isCollapse ? '64px' :'280px' ">
        <div class="menuCollapse"
             @click="toggleCollapse">|||</div>
        <el-row class="tac">
          <el-col :span="12">
            <el-menu default-active="2"
                     unique-opened
                     :collapse="isCollapse"
                     :collapse-transition="false"
                     class="el-menu-vertical-demo"
                     router
                     :default-active="activeIndex">
              <el-submenu :index="item.id + ''"
                          v-for="item in menulist"
                          :key="item.id">
                <!-- 一级菜单 -->
                <template slot="title">
                  <i :class="iconObj[item.id]"></i>
                  <span>{{item.authName}}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item :index="'/' + sub.path "
                              v-for="sub in item.children"
                              :key="sub.id"
                              @click="savecurrentIndex('/' + sub.path)">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{sub.authName}}</span>
                  </template>
                </el-menu-item>

              </el-submenu>
            </el-menu>

          </el-col>
        </el-row>
      </div>
      <div class="container">
        <div class="containerBox"
             style="display: block">
          <div class="box1">
            <router-view></router-view>
          </div>
        </div>

      </div>
      <div class="footer">
        <span>版权信息</span>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menulist: [],
      iconObj: {
        125: 'iconfont icon-yonghu3',
        103: 'iconfont icon-ITquanxian',
        101: 'iconfont icon-gouwudai2',
        102: 'iconfont icon-dingdan5',
        145: 'iconfont icon-shuju'
      },
      isCollapse: false,
      activeIndex: ''
    }
  },
  created () {
    this.getMenuList()
    this.activeIndex = window.sessionStorage.getItem('currentIndex')
  },
  methods: {
    loginOut () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    async getMenuList () {
      const { data: res } = await this.$http.get('menus')
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menulist = res.data
    },
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    savecurrentIndex (index) {
      // console.log(index)
      window.sessionStorage.setItem('currentIndex', index)
      this.activeIndex = index
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
}
ul li {
  list-style: none;
}

.houtai {
  width: 100%;
  height: 100%;
}
.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 60px;
  background-color: #fff;
  text-align: center;
  z-index: 6;
  border-bottom: 1px solid #ccc;
  box-shadow: 1px -6px 13px 7px rgba(0, 0, 0, 0.3);
  color: #4e4848;
}
.menu {
  position: absolute;
  top: 60px;
  left: 0;
  bottom: 0;
  background-color: #fff;
  border-right: 1px solid #ccc;
  box-shadow: -4px 10px 16px 1px rgba(0, 0, 0, 0.3);
  z-index: 5;
}
.container {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.container > .containerBox {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-left: 150px;
  display: none;
  overflow: auto;
  background-color: #f6f6f6;
  min-width: 1366px;
}
.footer {
  box-sizing: border-box;
  position: absolute;
  padding-left: 280px;
  width: 100%;
  bottom: 0;
  left: 0;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  z-index: 3;
  font-size: 12px;
  color: #919191;
  border-right: 1px solid #ccc;
  box-shadow: -4px 10px 16px 1px rgba(0, 0, 0, 0.3);
}
.box1 {
  position: absolute;
  top: 60px;
  left: 280px;
  width: 100%;
  height: 100%;
  padding: 5px;
  // background-color: yellow;
}
.log_img {
  float: left;
  margin: 3px 0 0 10px;
}
.logOut {
  position: absolute;
  top: 14px;
  right: 30px;
}
.el-submenu .el-menu-item {
  min-width: 280px;
}
.el-menu {
  border-right: none;
}
/deep/.el-submenu__title {
  width: 280px;
}
/deep/.el-submenu__title:hover,
.el-submenu__title:hover > i,
.el-submenu__title:hover > span {
  background-color: transparent;
  color: #d04646;
  cursor: pointer;
}
/deep/.el-menu-item-group__title:hover {
  background-color: #f0f0f0;
  color: #d04646;
  cursor: pointer;
}
.el-submenu__title i {
  padding-right: 7px;
}
.menuCollapse {
  background-color: #fff;
  padding: 7px 0px;
  border-bottom: 1px dashed #ccc;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.4em;
  font-weight: 700;
}
.menuCollapse:hover {
  color: #d04646;
}
</style>
